<template>
<div v-if="$store.state.loginVisible" class="dialog">
  <div class="modal-header">
    <h4 class="modal-title" id="myModalLabel2">登录</h4>
    <button type="button" @click="closelogin"><span aria-hidden="true">&times;</span></button>
  </div>
  <hr>
  <div class="modal-body">
    <form method="post" id="loginform">
      <div class="form-group">
        <label for="luname">账号:</label>
        <input v-model="uname" type="text" class="form-control" id="luname" name="luname" placeholder="Email" required autofocus>
        <span style="color:red;" id="laSpan"></span>
      </div>
      <div class="form-group">
        <label for="lpwd">密码:</label>
        <input v-model="pwd" type="password" class="form-control" id="lpwd" name="lpwd" placeholder="密码" >
        <span style="color:red;" id="lpSpan"></span>
      </div>
<!--      <div class="form-group">-->
<!--        <input type="text" style="height: 35px;width: 100px;" id="code" onblur="" placeholder="验证码"><img src="/user/loadCode/" onclick=""><span style="color:red;" id="cSpan"></span>-->
<!--        <input type="hidden" name="redirect" value="">-->
<!--        <input type="hidden" name="cartitems" value="None">-->
<!--      </div>-->
      <input type="button" class="btn" value="确定" @click="userLogin">
    </form>
  </div>
  <hr>
  <div class="modal-footer">
    <button type="button" class="btn" data-dismiss="modal" @click="closelogin">关闭</button>
  </div>
</div>
</template>

<script>
import $store from '../../store/index'
import {userLogin} from "@/network/login";
export default {
  name: "Login",
  data(){
    return{
      uname:'',
      pwd:'',
      nickname:'',
    }
  },
  methods:{
    open(){
      $store.commit("loginOpen");
    },
    close(){
      $store.commit("loginClose");
    },
    closelogin(){
      this.$emit('closelogin');
    },
    userLogin(){
      console.log(this.uname+this.pwd);
      userLogin(this.uname,this.pwd).then(res=>{
        this.$store.state.isLogin = res.flag;
        if(res.flag){
          this.$store.state.userName = res.nickname;
          this.$store.state.loginVisible = false;
        }
      })
    }
  },

}
</script>

<style scoped>
.dialog{
  width: 400px;
  height: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background-color: #ffffff;
}
.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
}
.btn:hover {
  background-color: #fff;
}
.modal-title,.close{
  display: inline-block;
}
</style>



